<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="../templates/templateAdminPrincipal.xhtml"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:define name="windowTitle">
        SAMUPG - Abrir Periodo
    </ui:define>

	<ui:define name="contenido">
		<p:growl id="growl"/>
		<h:form id="form" prependId="false">
			<p:tabView id="tvAbrirPeriodo">
				<p:tab id="tab1" title="Abrir Periodo">
					<p:wizard widgetVar="wizAbrirPeriodo" showStepStatus="false"
						showNavBar="false">
						<p:tab id="wiz1">
							<p:messages id="msgs" />
							<h:panelGrid columns="2" style="font-size:12px;">
								<h:outputText value="Periodo: " />
								<p:inputText
									value="#{abrirPeriodoController.periodoNuevo.nombre}"
									required="true" requiredMessage="Nombre del periodo requerido" />

								<h:outputText value="Fecha Inicio: " />
								<p:calendar
									value="#{abrirPeriodoController.periodoNuevo.fechaInicio}"
									required="true"
									requiredMessage="Debe ingresar la fecha de inicio" />

								<h:outputText value="Fecha Fin: " />
								<p:calendar
									value="#{abrirPeriodoController.periodoNuevo.fechaFin}"
									required="true"
									requiredMessage="Debe ingresar la fecha de cierre" />
							</h:panelGrid>

							<p:commandButton value="Continuar" ajax="true"
								actionListener="#{abrirPeriodoController.validarPeriodoListener}"
								oncomplete="validarPeriodo(xhr, status, args)"
								update="tvAbrirPeriodo" icon="ui-icon-circle-arrow-e" />
						</p:tab>

						<p:tab id="wiz2">
							<div style="clear: both;">
								<h:panelGrid columns="2" style="font-size:12px;">
									<p:commandButton value="Guardar" icon="ui-icon-disk"
										ajax="true"
										actionListener="#{abrirPeriodoController.guardarPeriodoListener}"
										oncomplete="guardoExito(xhr, status, args)"
										update="@this,msgsFinal,:growl" process="@this,pnlP" />
									<h:panelGroup />

									<h:outputText value="Periodo: " />
									<p:inputText
										value="#{abrirPeriodoController.periodoNuevo.nombre}"
										readonly="true" style="background-color: yellow;" />
								</h:panelGrid>
							</div>
							<div style="margin-top: 10px;">
								<p:panel id="pnlP">
									<h:outputText value="Agregar Maestrias:" />
									<p:pickList id="plMaestrias"
										value="#{abrirPeriodoController.maestrias}" var="maestria"
										effect="clip" itemValue="#{maestria}"
										itemLabel="#{maestria.nombre}" converter="maestriaConverter"
										showSourceControls="true" showTargetControls="true">

										<f:facet name="sourceCaption">Disponibles</f:facet>
										<f:facet name="targetCaption">Registrados</f:facet>

										<p:column>  
            							#{maestria.nombre}  
        							</p:column>
									</p:pickList>
								</p:panel>
							</div>
							<div>
								<p:commandButton value="Regresar"
									onclick="wizAbrirPeriodo.back();" actionListener="#"
									icon="ui-icon-circle-arrow-w" />
							</div>
						</p:tab>
						
						<p:tab id="wiz3">
							<p:messages id="msgsFinal" />
						</p:tab>
					</p:wizard>
				</p:tab>
			</p:tabView>
		</h:form>

		<script type="text/javascript">  
            function validarPeriodo(xhr, status, args) {
                if(!(args.validationFailed || !args.validoFecha)) {  
            		wizAbrirPeriodo.next();
                } 
            }

            function guardoExito(xhr, status, args) {
                if(!(args.validationFailed || !args.guardoExito)) {  
            		wizAbrirPeriodo.next();
                } 
            }
        </script>
	</ui:define>
</ui:composition>